<template>
  <div class="admin-nav">
    <el-container style="overflow: overlay; height: 100vh">
      <el-aside
        class="admin-demo"
        style="overflow: overlay; height: 100vh; padding-top: 60px"
        width="200px"
        ><div class="admin-nav-title">
          <h4>萌宠医族后台</h4>
        </div>
        <el-row style="width: 200px" class="tac" text-color="#fff">
          <el-menu
            router
            :default-active="activeindex"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#001020"
            text-color="gray"
            active-text-color="#ffd04b"
          >
            <el-menu-item style="padding: 0px" index="/admin/index/home">
              <i class="el-icon-s-home"></i>
              <span slot="title">系统首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-shopping-bag-1"></i>
                <span>产品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/index/prolist"
                  >产品类表</el-menu-item
                >
                <el-menu-item index="/admin/index/proclass"
                  >分类管理</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-picture-outline"></i>
                <span>图片管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/index/advertising"
                  >广告管理</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-coin"></i>
                <span>交易管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/index/deal">交易信息</el-menu-item>
                <el-menu-item index="/admin/index/trading"
                  >交易订单</el-menu-item
                >
                <!-- <el-menu-item index="/admin/index/dealorder"
                  >订单管理</el-menu-item
                > -->
                <el-menu-item index="/admin/index/dealmoney"
                  >交易金额</el-menu-item
                >
                <el-menu-item index="/admin/index/order">预约订单</el-menu-item>
                <el-menu-item index="/admin/index/refund"
                  >退款管理</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-bank-card"></i>
                <span>支付管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/index/account"
                  >账户管理</el-menu-item
                >
                <el-menu-item index="/admin/index/404">支付方式</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/admin/index/member"
                  >普通用户</el-menu-item
                >
                <el-menu-item index="/admin/index/physician">医师</el-menu-item>
                <el-menu-item index="/admin/index/beautician"
                  >美容师</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item style="padding: 0px" index="/admin/index/404">
              <i class="el-icon-chat-dot-square"></i>
              <span slot="title">消息管理</span>
            </el-menu-item>
            <el-menu-item style="padding: 0px" index="/admin/index/articlelist">
              <i class="el-icon-edit-outline"></i>
              <span slot="title">文章管理</span>
            </el-menu-item>

            <el-submenu index="9">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item-group>
                <!-- <el-menu-item index="9-1">会员列表</el-menu-item> -->
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-row>
      </el-aside>

      <el-container>
        <el-header> <admin-header /></el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import AdminHeader from "../components/AdminHeader.vue";
export default {
  components: { AdminHeader },
  data() {
    return {
      activeindex: `/admin/index/home`,
    };
  },
  mounted() {
    let path = this.$route.path;
    this.activeindex = path;
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-nav {
  width: 100vw;
  /* 滚动条样式 demo*/
  .admin-demo::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 3px;
  }
  .admin-demo::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 3px;
    background: #aaa;
  }
  .admin-demo::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    width: 3px;
    background: #fff0;
  }
  .el-menu-item,
  .el-submenu {
    width: 200px;
    min-width: 190px;
  }
  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    box-sizing: border-box;
    text-align: center;
    line-height: 200px;
    height: 100vh;
    widows: 100%;
    background-color: #001020;
    // position: relative;
    .admin-nav-title {
      width: 200px;
      background-color: #023364;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
    h4 {
      width: 197px;
      line-height: 60px;
      color: #fff;
      margin: 0;
    }
  }

  .el-container {
    min-width: 1000px;
  }
  .el-main {
    padding: 10px 20px 0;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
}
</style>
